<template>
  <div>
    <div class="http4">
      <el-card>
        <el-button type="primary"
          ><router-link to="/" style="text-decoration: none;color:#FFFFFF;"
            >返回首页</router-link
          ></el-button
        >

        <el-table
          :data="
            myData44
              .slice(
                (this.currentPage - 1) * this.pagesize,
                this.currentPage * this.pagesize
              )
              .filter(
                data =>
                  !search2 ||
                  data.tsCode.toLowerCase().includes(search2.toLowerCase())
              )
          "
          stripe
          :height="tableHeight"
          style="width: 100%"
          :default-sort="{ prop: 'tsCode', order: 'ascending' }"
        >
          <el-table-column prop="id" label="id" width="100px" sortable>
          </el-table-column>
          <el-table-column prop="tsCode" label="股票代码" fixed width="160px"
            ><template slot="header">
              <el-input
                v-model="search2"
                size="medium"
                placeholder="输入股票代码"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="date" label="日期" width="100px" sortable>
          </el-table-column>
          <el-table-column
            prop="annDate"
            label="公告日期"
            width="100px"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="endDate"
            label="发布日期"
            width="100px"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="assetsYoy"
            label="总资产增长率"
            width="130px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.assetsYoy > 0" style="color: red">{{
                towNumber(scope.row.assetsYoy)
              }}</span>
              <span v-else-if="scope.row.assetsYoy < 0" style="color: green">{{
                towNumber(scope.row.assetsYoy)
              }}</span>
              <span v-else>{{ towNumber(scope.row.assetsYoy) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="trYoy"
            label="营业总收入增长率"
            width="160px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.trYoy > 0" style="color: red">{{
                towNumber(scope.row.trYoy)
              }}</span>
              <span v-else-if="scope.row.trYoy < 0" style="color: green">{{
                towNumber(scope.row.trYoy)
              }}</span>
              <span v-else>{{ towNumber(scope.row.trYoy) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="opOfGr"
            label="营业利润率"
            width="120px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.opOfGr > 0" style="color: red">{{
                towNumber(scope.row.opOfGr)
              }}</span>
              <span v-else-if="scope.row.opOfGr < 0" style="color: green">{{
                towNumber(scope.row.opOfGr)
              }}</span>
              <span v-else>{{ towNumber(scope.row.opOfGr) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="fixedRate"
            label="固定资产占有率"
            width="150px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.fixedRate) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="debtToAssets"
            label="资产负债率"
            width="120px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.debtToAssets) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="quickRatio"
            label="速动比率"
            width="100px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.quickRatio) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="currentRatio"
            label="流动比率"
            width="100px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.currentRatio) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="ocfToShortdebt"
            label="现金流动负债比率"
            width="160px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ocfToShortdebt > 0" style="color: red">{{
                towNumber(scope.row.ocfToShortdebt)
              }}</span>
              <span
                v-else-if="scope.row.ocfToShortdebt < 0"
                style="color: green"
                >{{ towNumber(scope.row.ocfToShortdebt) }}</span
              >
              <span v-else>{{ towNumber(scope.row.ocfToShortdebt) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ebitToInterest"
            label="已获利息倍数"
            width="130px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ebitToInterest > 0" style="color: red">{{
                towNumber(scope.row.ebitToInterest)
              }}</span>
              <span
                v-else-if="scope.row.ebitToInterest < 0"
                style="color: green"
                >{{ towNumber(scope.row.ebitToInterest) }}</span
              >
              <span v-else>{{ towNumber(scope.row.ebitToInterest) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ocfps"
            label="每股经营活动产生的净现金流量"
            width="240px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.ocfps > 0" style="color: red">{{
                towNumber(scope.row.ocfps)
              }}</span>
              <span v-else-if="scope.row.ocfps < 0" style="color: green">{{
                towNumber(scope.row.ocfps)
              }}</span>
              <span v-else>{{ towNumber(scope.row.ocfps) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="arTurn"
            label="应收账款周转率"
            width="150px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.arTurn > 0" style="color: red">{{
                towNumber(scope.row.arTurn)
              }}</span>
              <span v-else-if="scope.row.arTurn < 0" style="color: green">{{
                towNumber(scope.row.arTurn)
              }}</span>
              <span v-else>{{ towNumber(scope.row.arTurn) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="invTurn"
            label="存货周转率"
            width="120px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.invTurn) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="assetsTurn"
            label="总资产周转率"
            width="140px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.assetsTurn) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="adminexpOfGr"
            label="管理能力"
            width="100px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.adminexpOfGr) }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="qNetprofitMargin"
            label="销售净利率"
            width="120px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.qNetprofitMargin > 0" style="color: red">{{
                towNumber(scope.row.qNetprofitMargin)
              }}</span>
              <span
                v-else-if="scope.row.qNetprofitMargin < 0"
                style="color: green"
                >{{ towNumber(scope.row.qNetprofitMargin) }}</span
              >
              <span v-else>{{ towNumber(scope.row.qNetprofitMargin) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="roaYearly"
            label="资产净利率"
            width="120px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.roaYearly > 0" style="color: red">{{
                towNumber(scope.row.roaYearly)
              }}</span>
              <span v-else-if="scope.row.roaYearly < 0" style="color: green">{{
                towNumber(scope.row.roaYearly)
              }}</span>
              <span v-else>{{ towNumber(scope.row.roaYearly) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="roe"
            label="股东权益报酬率"
            width="160px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.roe > 0" style="color: red">{{
                towNumber(scope.row.roe)
              }}</span>
              <span v-else-if="scope.row.roe < 0" style="color: green">{{
                towNumber(scope.row.roe)
              }}</span>
              <span v-else>{{ towNumber(scope.row.roe) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="rdRate"
            label="研发投入率"
            width="120px"
            sortable
          >
            <template slot-scope="scope"
              ><span>{{ towNumber(scope.row.rdRate) }}</span></template
            >
          </el-table-column>
          <el-table-column prop="eps" label="分红能力" width="100px" sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.eps > 0" style="color: red">{{
                towNumber(scope.row.eps)
              }}</span>
              <span v-else-if="scope.row.eps < 0" style="color: green">{{
                towNumber(scope.row.eps)
              }}</span>
              <span v-else>{{ towNumber(scope.row.eps) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="undistProfitPs"
            label="送配能力"
            width="100px"
            sortable
          >
            <template slot-scope="scope">
              <span v-if="scope.row.undistProfitPs > 0" style="color: red">{{
                towNumber(scope.row.undistProfitPs)
              }}</span>
              <span
                v-else-if="scope.row.undistProfitPs < 0"
                style="color: green"
                >{{ towNumber(scope.row.undistProfitPs) }}</span
              >
              <span v-else>{{ towNumber(scope.row.undistProfitPs) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="myData44.length"
          :small="true"
        >
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: '',
      data: [],
      myData4: {
        time: ''
      },

      myData44: [],
      search1: '',
      search2: '',
      //    分页
      currentPage: 1,
      pagesize: 10,
      total: 10
    }
  },
  mounted: function() {
    this.show4()
  },
  methods: {
    handleSizeChange: function(size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    towNumber(val) {
      return val.toFixed(2)
    },
    show4() {
      this.$axios
        .get(
          'http://121.196.123.12:8095/lmdfactors/lmd_factors_by_date?factor_id=1&specified_time=20210501'
        )
        .then(res => {
          console.log(res.data)
          this.myData4 = res.data
          const myData44 = []
          for (let i = 0; i < res.data.data.factors.length; i++) {
            myData44.push(res.data.data.factors[i])
          }
          this.myData44 = myData44
        })
    }
  },
  created() {
    // 3. 动态计算表格高度
    const windowHeight =
      document.documentElement.clientHeight || document.body.clientHeight
    // 此处减去100即为当前屏幕内除了表格高度以外其它内容的总高度，
    this.tableHeight = windowHeight - 150
  }
}
</script>
<style Lang="less" scoped>
.el-table th.gutter {
  display: table-cell !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
</style>
